<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-11-01 09:18:18
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-03-18 13:59:32
 * @FilePath: \vue-admin-template\src\components\formCollect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 填写表单 -->
<template>
    <div class="warehouseManagement " v-if="showPage">
        <div style="margin-bottom: 7px;">
            <img @click="clickBack" style="vertical-align: bottom;margin-right: 10px;cursor: pointer;"
                src="@/assets/icon/返回.png" alt="">
            <span class="normal-text" style="font-size: 19px;">出库管理-{{ item ? '详情' : '新增' }}</span>
        </div>
        <div class="formItem-main">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;">
                <div class="title-box-name">出库单</div>
                <div>
                    <el-button type="primary" class="noraml-btn" @click="clickBtnSave">{{ item ? '修改' : '新增' }}</el-button>
                </div>
            </div>

            <div style="border: 2px solid #D8E2ED;border-radius: 5px;padding: 30px 20px;margin-bottom: 10px;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="出库单号">
                        <el-input v-model="no" placeholder="" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="出库时间">
                        <el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" :clearable='false' type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="领用部门">
                        <el-input v-model="useDepartment" placeholder="" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="领用人">
                        <el-input v-model="recipient" placeholder="" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="margin: 15px 0px;" @click="clickAdd">
                <img src="@/assets/icon/新增新.png" style="vertical-align: bottom;margin-right: 5px;cursor: pointer;" alt="">
                <span style="cursor: pointer;font-size: 15px;color: #000;">新增</span>
            </div>
            <section>
                <el-form :rules="formInline" ref="tableForm" :model="formInline">
                    <el-table ref="tableMain" :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="formInline.tableData" style="width: 100%"
                        :max-height="tableHeight">
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="name" label="名称" width="260">
                            <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rulesTable.name">
                                    <SearchCostItem @clearContent="clearContent" :temTableList="temTableList"
                                        :url="'/spar/stock-record/getInventoryList'" v-model="scope.row.name"
                                 :checkId = "scope.row.infoId"   :name.sync="scope.row.name" @selectedData="selectedFeeItem" :index="scope.$index"
                                        placeholder="请选择" />
                                </el-form-item>

                            </template>
                        </el-table-column>

                        <el-table-column prop="order" label="类别">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.type" placeholder="请输入内容" disabled></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order" label="编号">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.code" placeholder="请输入内容" disabled></el-input>
                            </template>
                        </el-table-column>
                     
                        <el-table-column prop="order" label="单位">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.unit" placeholder="请输入内容" disabled></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order" label="厂家">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.manufacturer" placeholder="请输入内容" disabled></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="出库数量">
                            <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.num'" :rules="rulesTable.num">
                                    <el-input v-model="scope.row.num" type="number" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order" label="备注">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <img @click="clickDelete(scope.$index)" src="@/assets/icon/列表icon-删除.png"
                                    style="margin-right: 10px;cursor: pointer;" alt="">
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>

            </section>
        </div>

    </div>
</template>
  
<script>
import SearchCostItem from '../../warehouseManagement/components/searchTable.vue'

export default {
    components: { SearchCostItem },
    props: {
        item: {
            type: [Object, String],

        },
    },
    data() {

        return {
            tableHeight: 500,
            time: '',
            no: '',
            formInline: {
                tableData: [],
            },
            rulesTable: {
                name: [
                    { required: true, message: '', trigger: ['blur', 'change'] }
                ],
                num: [
                    { required: true, message: '', trigger: ['blur', 'change'] }
                ],
                norm: [
                    { required: true, message: '', trigger: ['blur', 'change'] }
                ],
            },
            useDepartment: '',
            recipient: '',
            temTableList: [
               
            ],
            showPage: false
        }
    },
    mounted() {
        this.$baseRequestGetParams('/spar/stock-record/getInventoryList', { name: '', norm: '' }, {}, 'get').then(res => {
            this.temTableList = res.data;
            this.showPage = true;
        })
        if (this.item) {
            this.$baseRequest('/spar/stock-record/getList/' + this.item.no, {}, {}, 'get').then(res => {

                this.no = this.item.no;
                this.time = this.item.invDate;
                this.useDepartment = this.item.useDepartment;
                this.recipient = this.item.recipient;
                this.formInline.tableData = res.data;

            })
        } else {
            this.getToday();
            this.getNo();
        }

        this.$nextTick(res => {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.$el.getBoundingClientRect().top + 90;
            this.tableHeight = tableHeight - topHeight;
        })
    },
    computed: {
        listenHeight() {
            return this.$store.state.user.heightSize
        }
    },
    watch: {
        listenHeight(val) {
            const tableHeight = document.documentElement.clientHeight;
            const topHeight = this.$refs.tableMain.$el.getBoundingClientRect().top + 90;
            this.tableHeight = tableHeight - topHeight;
        }
    },
    methods: {

        clickAdd() {
            this.formInline.tableData.push({
                name: '', // 临时
                id: '',
                infoId: '',
                unit: '',
                type: '',
                num: '',
                remark: '',
                code: '',
                manufacturer: '',
                norm: '',
            })
        },
        getNo() {
            this.$baseRequestGet('/spar/stock-record/getNextNo/0', {}, 'get').then(res => {
                this.no = res.data;
            })
        },
        getToday() {
            var getTime = new Date().getTime(); //获取到当前时间戳
            var time = new Date(getTime); //创建一个日期对象
            var year = time.getFullYear(); // 年
            var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
            var date = time.getDate().toString().padStart(2, '0'); // 日
            var hour = time.getHours().toString().padStart(2, '0'); // 时
            var minute = time.getMinutes().toString().padStart(2, '0'); // 分
            var second = time.getSeconds().toString().padStart(2, '0'); // 秒
            this.time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
        },
        clickBack() {
            this.$emit('closeformCollect')
        },
        clickBtnSave() {
            if (this.formInline.tableData.length == 0) {
                this.$message.warning('请新增内容')
                return;
            };
            this.formInline.tableData.forEach(item => {
                if(!item.id && !item.infoId) {
                    item.name = '';
                }
            })
            this.$refs["tableForm"].validate((valid) => {
                if (valid) {
                    if (!this.recipient || !this.useDepartment) {
                        this.$message.warning('请填写领用人和领用部门')
                        return;
                    }
                    let params = []
                    if (this.item) {
                        params = this.formInline.tableData.map(item => {
                            return {
                                infoId: item.infoId || item.id,
                                num: Number(item.num),
                                remark: item.remark,
                                type: 0,
                                id: item.no ? item.id : '',
                                no: item.no,
                                invDate: item.invDate || this.time,
                                useDepartment: this.useDepartment,
                                recipient: this.recipient,
                            }
                        })
                    } else {
                        params = this.formInline.tableData.map(item => {
                            return {
                                infoId: item.id,
                                num: Number(item.num),
                                remark: item.remark,
                                type: 0,
                                invDate: this.time,
                                useDepartment: this.useDepartment,
                                recipient: this.recipient,
                            }
                        })
                    }
                    let url = this.item ? '/spar/stock-record/revise' : '/spar/stock-record/create';
                    let meth = this.item ? 'put' : 'post'

                    this.$baseRequest(url, params, {}, meth).then(res => {
                        this.$message.success(`${this.item ? '修改' : '新增'}成功`);
                        this.$emit('closeformCollect', 'isFresh')
                    })
                } else {
                    this.$message.warning('请将表格必填项填写完整')
                    return false;
                }
            });

        },
        clickDelete(index) {
            this.formInline.tableData.splice(index, 1);
        },
        selectedFeeItem(e) {

            this.formInline.tableData[e.index].name = e.list.name;
            for (let i in this.formInline.tableData[e.index]) {
                this.formInline.tableData[e.index][i] = e.list[i]
            }
            this.formInline.tableData[e.index].remark = '';
            this.formInline.tableData[e.index].id = e.list.infoId || e.list.id;
        },
        clearContent(index) {
            if(!this.formInline.tableData[index].id && !this.formInline.tableData[index].infoId) return;
            for (let i in this.formInline.tableData[index]) {
                if(i !== 'name') {
                    this.formInline.tableData[index][i] = ''
                }
            }
        }
    }
}
</script>
<style>
.warehouseManagement .el-form-item {
    margin-bottom: 0px;
}

.warehouseManagementPage .el-select-dropdown__list {
    padding: 0px;
}
</style>
<style lang="scss" scoped>
.formItem-main {
    margin-top: 10px;
    padding: 40px 30px;
    border: 1px solid #E4E6EC;
    background-color: #fff;


    .title {
        font-size: 24px;
    }
}

.downFile-box {
    position: absolute;
    right: 20px;
    top: 35%;
    color: #5CD8DA;
    cursor: pointer;
}

.file-list-styles {
    background-color: #E0EFFC;
    border-radius: 5px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
}

.title-box-name {
    position: relative;
    margin-left: 10px;
    font-size: 18px;
}

.title-box-name::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0px;
    width: 4px;
    height: 19px;
    border-radius: 2px;
    background-color: #5CD8DA;

}

.info-flex-box {
    .info-flex-box-item {
        width: 100%;
        background-color: #F5F7FB;
        margin-top: 10px;
        padding: 15px;
        border-radius: 5px;
        color: #6C6D6E;
        line-height: 1.5;
        font-size: 15px;

    }
}

.item-info {
    width: 20%;
    margin-bottom: 20px;
    min-width: 200px;

    span {
        margin-left: 10px;
    }
}
</style>
  